var container = document.querySelector(".container");
var axis = document.getElementById("axis");
var direction = document.getElementById("direction");
var startEnd = document.getElementById("start-end");

Ps.initialize(container);

document.addEventListener("ps-scroll-y", function() {
  axis.innerHTML = "Y Axis";
});

document.addEventListener("ps-scroll-x", function() {
  axis.innerHTML = "X Axis";
});

document.addEventListener("ps-scroll-up", function() {
  direction.innerHTML = "up";
});

document.addEventListener("ps-scroll-down", function() {
  direction.innerHTML = "down";
});

document.addEventListener("ps-scroll-left", function() {
  direction.innerHTML = "left";
});

document.addEventListener("ps-scroll-right", function() {
  direction.innerHTML = "right";
});

document.addEventListener("ps-y-reach-start", function() {
  startEnd.innerHTML = "Reached start of <em>Y-Axis</em>";
});

document.addEventListener("ps-y-reach-end", function() {
  startEnd.innerHTML = "Reached end of <em>Y-Axis</em>";
});

document.addEventListener("ps-x-reach-start", function() {
  startEnd.innerHTML = "Reached start of <em>X-Axis</em>";
});

document.addEventListener("ps-x-reach-end", function() {
  startEnd.innerHTML = "Reached end of <em>X-Axis</em>";
});
